<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>发布红包 - 多风格展示</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      min-height: 100vh;
      color: #333;
      transition: background-color 0.3s;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    /* 页面容器 */
    .page-container {
      display: none;
      min-height: 100vh;
      padding-bottom: 80px;
    }
    
    .page-container.active {
      display: block;
    }
    
    /* 导航栏样式 */
    .navbar {
      padding: 15px 0;
      position: sticky;
      top: 0;
      z-index: 100;
      transition: all 0.3s;
    }
    
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      background: none;
      border: none;
      color: inherit;
      font-size: 16px;
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 6px;
      font-weight: 500;
      transition: background-color 0.2s;
    }
    
    .nav-btn.primary {
      font-weight: 600;
    }
    
    /* 红包容器样式 */
    .redpacket-container {
      padding: 20px 0;
    }
    
    /* 金额输入区域 */
    .amount-container {
      text-align: center;
      padding: 30px 0;
      position: relative;
    }
    
    .amount-input {
      width: 100%;
      border: none;
      outline: none;
      background: transparent;
      font-size: 48px;
      font-weight: 700;
      text-align: center;
      padding: 10px 0;
      color: inherit;
    }
    
    .amount-unit {
      font-size: 24px;
      font-weight: 500;
      position: absolute;
      right: 35%;
      top: 50%;
      transform: translateY(-50%);
    }
    
    /* 红包类型选择 */
    .packet-type {
      display: flex;
      justify-content: space-around;
      margin: 20px 0 30px;
    }
    
    .type-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 30%;
      padding: 15px 0;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .type-item.active {
      transform: scale(1.05);
    }
    
    .type-icon {
      font-size: 28px;
      margin-bottom: 8px;
    }
    
    .type-name {
      font-size: 14px;
      font-weight: 500;
    }
    
    /* 输入选项区域 */
    .input-group {
      margin-bottom: 15px;
    }
    
    .input-label {
      display: block;
      margin-bottom: 8px;
      font-size: 15px;
      font-weight: 500;
    }
    
    .input-control {
      width: 100%;
      padding: 12px 15px;
      border-radius: 8px;
      border: 1px solid;
      font-size: 16px;
      outline: none;
      background: transparent;
      color: inherit;
    }
    
    textarea.input-control {
      min-height: 100px;
      resize: none;
      line-height: 1.5;
    }
    
    /* 选项区块 */
    .option-block {
      padding: 15px 0;
      border-bottom: 1px solid;
      cursor: pointer;
    }
    
    .option-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }
    
    .option-title {
      font-size: 16px;
      font-weight: 500;
    }
    
    .option-value {
      font-size: 15px;
      opacity: 0.8;
    }
    
    .option-desc {
      font-size: 13px;
      opacity: 0.7;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 30px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      padding: 8px;
      display: flex;
      gap: 5px;
    }
    
    .style-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      transition: transform 0.2s;
    }
    
    .style-btn:hover {
      transform: scale(1.1);
    }
    
    .style-btn.active {
      box-shadow: 0 0 0 2px white, 0 0 0 4px #e63946;
    }
    
    /* 底部操作栏 */
    .bottom-actions {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 540px;
      margin: 0 auto;
      padding: 15px;
      z-index: 100;
    }
    
    .publish-btn {
      width: 100%;
      padding: 14px 0;
      border-radius: 30px;
      font-size: 17px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .cost-info {
      text-align: center;
      margin-top: 10px;
      font-size: 13px;
      opacity: 0.8;
    }
    
    /* 弹出层通用样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      display: none;
      z-index: 1000;
    }
    
    .modal-popup {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 540px;
      margin: 0 auto;
      border-radius: 16px 16px 0 0;
      max-height: 80vh;
      overflow-y: auto;
      transform: translateY(100%);
      transition: transform 0.3s ease-out;
      z-index: 1001;
    }
    
    .modal-popup.active {
      transform: translateY(0);
    }
    
    .modal-header {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .modal-close {
      background: none;
      border: none;
      color: inherit;
      font-size: 20px;
      cursor: pointer;
    }
    
    .modal-body {
      padding: 15px;
    }
    
    /* 选项列表 */
    .option-list {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .option-list li {
      padding: 12px 15px;
      border-bottom: 1px solid;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .option-list li:last-child {
      border-bottom: none;
    }
    
    .option-check {
      font-size: 18px;
      opacity: 0;
      transition: opacity 0.2s;
    }
    
    .option-list li.selected .option-check {
      opacity: 1;
    }
    
    /* 成功弹窗 */
    .success-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.7);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    
    .success-content {
      width: 85%;
      max-width: 320px;
      border-radius: 16px;
      padding: 30px 20px;
      text-align: center;
    }
    
    .success-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 40px;
    }
    
    .success-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    
    .success-desc {
      font-size: 14px;
      margin-bottom: 25px;
    }
    
    .success-btn {
      padding: 10px 24px;
      border-radius: 8px;
      font-weight: 500;
      border: none;
      cursor: pointer;
      font-size: 16px;
    }
    
    /* 风格1 - 传统红 */
    .style-1 {
      background-color: #fff5f5;
      color: #d32f2f;
    }
    
    .style-1 .navbar {
      background-color: #e63946;
      color: white;
      box-shadow: 0 2px 10px rgba(230, 57, 70, 0.3);
    }
    
    .style-1 .nav-btn.primary {
      background-color: rgba(255,255,255,0.2);
      color: white;
    }
    
    .style-1 .type-item {
      background-color: #fff0f0;
      border: 1px solid #ffcccc;
      color: #d32f2f;
    }
    
    .style-1 .type-item.active {
      background-color: #ffebee;
      border-color: #e63946;
      box-shadow: 0 4px 15px rgba(230, 57, 70, 0.2);
    }
    
    .style-1 .input-control {
      border-color: #ffcccc;
      background-color: #fff0f0;
    }
    
    .style-1 .option-block {
      border-color: #ffeeee;
    }
    
    .style-1 .bottom-actions {
      background-color: #fff5f5;
    }
    
    .style-1 .publish-btn {
      background: linear-gradient(135deg, #e63946, #d32f2f);
      color: white;
      box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
    }
    
    .style-1 .publish-btn:active {
      transform: scale(0.98);
    }
    
    .style-1 .modal-popup {
      background-color: white;
    }
    
    .style-1 .modal-header, .style-1 .option-list li {
      border-color: #eee;
    }
    
    .style-1 .option-check {
      color: #e63946;
    }
    
    .style-1 .success-content {
      background-color: white;
    }
    
    .style-1 .success-icon {
      background-color: #ffebee;
      color: #e63946;
    }
    
    .style-1 .success-btn {
      background-color: #e63946;
      color: white;
    }
    
    /* 风格2 - 典雅金 */
    .style-2 {
      background-color: #fffbf0;
      color: #856404;
    }
    
    .style-2 .navbar {
      background-color: #ffc107;
      color: #856404;
      box-shadow: 0 2px 10px rgba(255, 193, 7, 0.3);
    }
    
    .style-2 .nav-btn.primary {
      background-color: rgba(133, 100, 4, 0.1);
      color: #856404;
    }
    
    .style-2 .type-item {
      background-color: #fff8e1;
      border: 1px solid #ffeeba;
      color: #856404;
    }
    
    .style-2 .type-item.active {
      background-color: #fff3cd;
      border-color: #ffc107;
      box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
    }
    
    .style-2 .input-control {
      border-color: #ffeeba;
      background-color: #fff8e1;
    }
    
    .style-2 .option-block {
      border-color: #fff0c8;
    }
    
    .style-2 .bottom-actions {
      background-color: #fffbf0;
    }
    
    .style-2 .publish-btn {
      background: linear-gradient(135deg, #ffc107, #e0a800);
      color: #856404;
      box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
    }
    
    .style-2 .publish-btn:active {
      transform: scale(0.98);
    }
    
    .style-2 .modal-popup {
      background-color: white;
    }
    
    .style-2 .modal-header, .style-2 .option-list li {
      border-color: #f8f9fa;
    }
    
    .style-2 .option-check {
      color: #ffc107;
    }
    
    .style-2 .success-content {
      background-color: white;
    }
    
    .style-2 .success-icon {
      background-color: #fff3cd;
      color: #ffc107;
    }
    
    .style-2 .success-btn {
      background-color: #ffc107;
      color: #856404;
    }
    
    /* 风格3 - 清新蓝 */
    .style-3 {
      background-color: #f0f7ff;
      color: #0d47a1;
    }
    
    .style-3 .navbar {
      background-color: #1976d2;
      color: white;
      box-shadow: 0 2px 10px rgba(25, 118, 210, 0.3);
    }
    
    .style-3 .nav-btn.primary {
      background-color: rgba(255,255,255,0.2);
      color: white;
    }
    
    .style-3 .type-item {
      background-color: #e8f0fe;
      border: 1px solid #bbdefb;
      color: #0d47a1;
    }
    
    .style-3 .type-item.active {
      background-color: #dceaff;
      border-color: #1976d2;
      box-shadow: 0 4px 15px rgba(25, 118, 210, 0.2);
    }
    
    .style-3 .input-control {
      border-color: #bbdefb;
      background-color: #e8f0fe;
    }
    
    .style-3 .option-block {
      border-color: #e3f2fd;
    }
    
    .style-3 .bottom-actions {
      background-color: #f0f7ff;
    }
    
    .style-3 .publish-btn {
      background: linear-gradient(135deg, #1976d2, #0d47a1);
      color: white;
      box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3);
    }
    
    .style-3 .publish-btn:active {
      transform: scale(0.98);
    }
    
    .style-3 .modal-popup {
      background-color: white;
    }
    
    .style-3 .modal-header, .style-3 .option-list li {
      border-color: #e9ecef;
    }
    
    .style-3 .option-check {
      color: #1976d2;
    }
    
    .style-3 .success-content {
      background-color: white;
    }
    
    .style-3 .success-icon {
      background-color: #e3f2fd;
      color: #1976d2;
    }
    
    .style-3 .success-btn {
      background-color: #1976d2;
      color: white;
    }
    
    /* 风格4 - 喜庆紫 */
    .style-4 {
      background-color: #faf4ff;
      color: #6a1b9a;
    }
    
    .style-4 .navbar {
      background-color: #9c27b0;
      color: white;
      box-shadow: 0 2px 10px rgba(156, 39, 176, 0.3);
    }
    
    .style-4 .nav-btn.primary {
      background-color: rgba(255,255,255,0.2);
      color: white;
    }
    
    .style-4 .type-item {
      background-color: #f3e5f5;
      border: 1px solid #e1bee7;
      color: #6a1b9a;
    }
    
    .style-4 .type-item.active {
      background-color: #eedeff;
      border-color: #9c27b0;
      box-shadow: 0 4px 15px rgba(156, 39, 176, 0.2);
    }
    
    .style-4 .input-control {
      border-color: #e1bee7;
      background-color: #f3e5f5;
    }
    
    .style-4 .option-block {
      border-color: #f0e6f6;
    }
    
    .style-4 .bottom-actions {
      background-color: #faf4ff;
    }
    
    .style-4 .publish-btn {
      background: linear-gradient(135deg, #9c27b0, #6a1b9a);
      color: white;
      box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
    }
    
    .style-4 .publish-btn:active {
      transform: scale(0.98);
    }
    
    .style-4 .modal-popup {
      background-color: white;
    }
    
    .style-4 .modal-header, .style-4 .option-list li {
      border-color: #f8f9fa;
    }
    
    .style-4 .option-check {
      color: #9c27b0;
    }
    
    .style-4 .success-content {
      background-color: white;
    }
    
    .style-4 .success-icon {
      background-color: #f3e5f5;
      color: #9c27b0;
    }
    
    .style-4 .success-btn {
      background-color: #9c27b0;
      color: white;
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="1" style="background-color: #e63946;"></button>
    <button class="style-btn" data-style="2" style="background-color: #ffc107;"></button>
    <button class="style-btn" data-style="3" style="background-color: #1976d2;"></button>
    <button class="style-btn" data-style="4" style="background-color: #9c27b0;"></button>
  </div>
  
  <!-- 风格1 - 传统红 -->
  <div class="page-container style-1 active" data-style="1">
    <!-- 导航栏 -->
    <div class="navbar">
      <div class="container nav-container">
        <button class="nav-btn back-btn">取消</button>
        <h1 class="nav-title">发红包</h1>
        <button class="nav-btn primary help-btn">帮助</button>
      </div>
    </div>
    
    <div class="container">
      <div class="redpacket-container">
        <!-- 金额输入 -->
        <div class="amount-container">
          <input type="number" class="amount-input" placeholder="0" min="0.01" step="0.01">
          <span class="amount-unit">元</span>
        </div>
        
        <!-- 红包类型 -->
        <div class="packet-type">
          <div class="type-item active" data-type="random">
            <i class="fa fa-random type-icon"></i>
            <span class="type-name">拼手气</span>
          </div>
          <div class="type-item" data-type="average">
            <i class="fa fa-th type-icon"></i>
            <span class="type-name">普通</span>
          </div>
          <div class="type-item" data-type="lucky">
            <i class="fa fa-star type-icon"></i>
            <span class="type-name">运气王</span>
          </div>
        </div>
        
        <!-- 红包数量 -->
        <div class="input-group">
          <label class="input-label">红包数量</label>
          <input type="number" class="input-control count-input" value="1" min="1" max="100">
        </div>
        
        <!-- 红包留言 -->
        <div class="input-group">
          <label class="input-label">红包留言</label>
          <textarea class="input-control message-input" placeholder="恭喜发财，大吉大利"></textarea>
        </div>
        
        <!-- 红包封面 -->
        <div class="option-block cover-block">
          <div class="option-header">
            <span class="option-title">红包封面</span>
            <span class="option-value">默认封面</span>
          </div>
          <div class="option-desc">选择一个红包封面，让你的红包更特别</div>
        </div>
        
        <!-- 发放方式 -->
        <div class="option-block method-block">
          <div class="option-header">
            <span class="option-title">发放方式</span>
            <span class="option-value">群内所有人可见</span>
          </div>
          <div class="option-desc">设置红包的可见范围和领取限制</div>
        </div>
        
        <!-- 支付方式 -->
        <div class="option-block payment-block">
          <div class="option-header">
            <span class="option-title">支付方式</span>
            <span class="option-value">余额支付</span>
          </div>
          <div class="option-desc">选择用于支付红包的账户</div>
        </div>
      </div>
    </div>
    
    <!-- 底部操作栏 -->
    <div class="bottom-actions">
      <button class="publish-btn">塞钱进红包</button>
      <div class="cost-info">本次预计支出：<span class="total-amount">0.00</span>元</div>
    </div>
  </div>
  
  <!-- 风格2 - 典雅金 -->
  <div class="page-container style-2" data-style="2">
    <!-- 内容结构与风格1相同 -->
    <div class="navbar">
      <div class="container nav-container">
        <button class="nav-btn back-btn">取消</button>
        <h1 class="nav-title">发红包</h1>
        <button class="nav-btn primary help-btn">帮助</button>
      </div>
    </div>
    
    <div class="container">
      <div class="redpacket-container">
        <div class="amount-container">
          <input type="number" class="amount-input" placeholder="0" min="0.01" step="0.01">
          <span class="amount-unit">元</span>
        </div>
        
        <div class="packet-type">
          <div class="type-item active" data-type="random">
            <i class="fa fa-random type-icon"></i>
            <span class="type-name">拼手气</span>
          </div>
          <div class="type-item" data-type="average">
            <i class="fa fa-th type-icon"></i>
            <span class="type-name">普通</span>
          </div>
          <div class="type-item" data-type="lucky">
            <i class="fa fa-star type-icon"></i>
            <span class="type-name">运气王</span>
          </div>
        </div>
        
        <div class="input-group">
          <label class="input-label">红包数量</label>
          <input type="number" class="input-control count-input" value="1" min="1" max="100">
        </div>
        
        <div class="input-group">
          <label class="input-label">红包留言</label>
          <textarea class="input-control message-input" placeholder="恭喜发财，大吉大利"></textarea>
        </div>
        
        <div class="option-block cover-block">
          <div class="option-header">
            <span class="option-title">红包封面</span>
            <span class="option-value">默认封面</span>
          </div>
          <div class="option-desc">选择一个红包封面，让你的红包更特别</div>
        </div>
        
        <div class="option-block method-block">
          <div class="option-header">
            <span class="option-title">发放方式</span>
            <span class="option-value">群内所有人可见</span>
          </div>
          <div class="option-desc">设置红包的可见范围和领取限制</div>
        </div>
        
        <div class="option-block payment-block">
          <div class="option-header">
            <span class="option-title">支付方式</span>
            <span class="option-value">余额支付</span>
          </div>
          <div class="option-desc">选择用于支付红包的账户</div>
        </div>
      </div>
    </div>
    
    <div class="bottom-actions">
      <button class="publish-btn">塞钱进红包</button>
      <div class="cost-info">本次预计支出：<span class="total-amount">0.00</span>元</div>
    </div>
  </div>
  
  <!-- 风格3 - 清新蓝 -->
  <div class="page-container style-3" data-style="3">
    <!-- 内容结构与风格1相同 -->
    <div class="navbar">
      <div class="container nav-container">
        <button class="nav-btn back-btn">取消</button>
        <h1 class="nav-title">发红包</h1>
        <button class="nav-btn primary help-btn">帮助</button>
      </div>
    </div>
    
    <div class="container">
      <div class="redpacket-container">
        <div class="amount-container">
          <input type="number" class="amount-input" placeholder="0" min="0.01" step="0.01">
          <span class="amount-unit">元</span>
        </div>
        
        <div class="packet-type">
          <div class="type-item active" data-type="random">
            <i class="fa fa-random type-icon"></i>
            <span class="type-name">拼手气</span>
          </div>
          <div class="type-item" data-type="average">
            <i class="fa fa-th type-icon"></i>
            <span class="type-name">普通</span>
          </div>
          <div class="type-item" data-type="lucky">
            <i class="fa fa-star type-icon"></i>
            <span class="type-name">运气王</span>
          </div>
        </div>
        
        <div class="input-group">
          <label class="input-label">红包数量</label>
          <input type="number" class="input-control count-input" value="1" min="1" max="100">
        </div>
        
        <div class="input-group">
          <label class="input-label">红包留言</label>
          <textarea class="input-control message-input" placeholder="恭喜发财，大吉大利"></textarea>
        </div>
        
        <div class="option-block cover-block">
          <div class="option-header">
            <span class="option-title">红包封面</span>
            <span class="option-value">默认封面</span>
          </div>
          <div class="option-desc">选择一个红包封面，让你的红包更特别</div>
        </div>
        
        <div class="option-block method-block">
          <div class="option-header">
            <span class="option-title">发放方式</span>
            <span class="option-value">群内所有人可见</span>
          </div>
          <div class="option-desc">设置红包的可见范围和领取限制</div>
        </div>
        
        <div class="option-block payment-block">
          <div class="option-header">
            <span class="option-title">支付方式</span>
            <span class="option-value">余额支付</span>
          </div>
          <div class="option-desc">选择用于支付红包的账户</div>
        </div>
      </div>
    </div>
    
    <div class="bottom-actions">
      <button class="publish-btn">塞钱进红包</button>
      <div class="cost-info">本次预计支出：<span class="total-amount">0.00</span>元</div>
    </div>
  </div>
  
  <!-- 风格4 - 喜庆紫 -->
  <div class="page-container style-4" data-style="4">
    <!-- 内容结构与风格1相同 -->
    <div class="navbar">
      <div class="container nav-container">
        <button class="nav-btn back-btn">取消</button>
        <h1 class="nav-title">发红包</h1>
        <button class="nav-btn primary help-btn">帮助</button>
      </div>
    </div>
    
    <div class="container">
      <div class="redpacket-container">
        <div class="amount-container">
          <input type="number" class="amount-input" placeholder="0" min="0.01" step="0.01">
          <span class="amount-unit">元</span>
        </div>
        
        <div class="packet-type">
          <div class="type-item active" data-type="random">
            <i class="fa fa-random type-icon"></i>
            <span class="type-name">拼手气</span>
          </div>
          <div class="type-item" data-type="average">
            <i class="fa fa-th type-icon"></i>
            <span class="type-name">普通</span>
          </div>
          <div class="type-item" data-type="lucky">
            <i class="fa fa-star type-icon"></i>
            <span class="type-name">运气王</span>
          </div>
        </div>
        
        <div class="input-group">
          <label class="input-label">红包数量</label>
          <input type="number" class="input-control count-input" value="1" min="1" max="100">
        </div>
        
        <div class="input-group">
          <label class="input-label">红包留言</label>
          <textarea class="input-control message-input" placeholder="恭喜发财，大吉大利"></textarea>
        </div>
        
        <div class="option-block cover-block">
          <div class="option-header">
            <span class="option-title">红包封面</span>
            <span class="option-value">默认封面</span>
          </div>
          <div class="option-desc">选择一个红包封面，让你的红包更特别</div>
        </div>
        
        <div class="option-block method-block">
          <div class="option-header">
            <span class="option-title">发放方式</span>
            <span class="option-value">群内所有人可见</span>
          </div>
          <div class="option-desc">设置红包的可见范围和领取限制</div>
        </div>
        
        <div class="option-block payment-block">
          <div class="option-header">
            <span class="option-title">支付方式</span>
            <span class="option-value">余额支付</span>
          </div>
          <div class="option-desc">选择用于支付红包的账户</div>
        </div>
      </div>
    </div>
    
    <div class="bottom-actions">
      <button class="publish-btn">塞钱进红包</button>
      <div class="cost-info">本次预计支出：<span class="total-amount">0.00</span>元</div>
    </div>
  </div>
  
  <!-- 红包封面选择弹窗 -->
  <div class="modal-overlay cover-overlay"></div>
  <div class="modal-popup cover-popup">
    <div class="modal-header">
      <h2 class="modal-title">选择红包封面</h2>
      <button class="modal-close cover-close">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <ul class="option-list">
        <li class="selected">
          <span>默认封面</span>
          <i class="fa fa-check option-check"></i>
        </li>
        <li>
          <span>恭喜发财</span>
          <i class="fa fa-check option-check"></i>
        </li>
        <li>
          <span>新年快乐</span>
          <i class="fa fa-check option-check"></i>
        </li>
        <li>
          <span>万事如意</span>
          <i class="fa fa-check option-check"></i>
        </li>
        <li>
          <span>自定义封面</span>
          <i class="fa fa-check option-check"></i>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- 发放方式选择弹窗 -->
  <div class="modal-overlay method-overlay"></div>
  <div class="modal-popup method-popup">
    <div class="modal-header">
      <h2 class="modal-title">选择发放方式</h2>
      <button class="modal-close method-close">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <ul class="option-list">
        <li class="selected">
          <span>群内所有人可见</span>
          <i class="fa fa-check option-check"></i>
        </li>
        <li>
          <span>仅指定好友可见</span>
          <i class="fa fa-check option-check"></i>
        </li>
        <li>
          <span>定时发放</span>
          <i class="fa fa-check option-check"></i>
        </li>
        <li>
          <span>需回答问题才能领取</span>
          <i class="fa fa-check option-check"></i>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- 支付方式选择弹窗 -->
  <div class="modal-overlay payment-overlay"></div>
  <div class="modal-popup payment-popup">
    <div class="modal-header">
      <h2 class="modal-title">选择支付方式</h2>
      <button class="modal-close payment-close">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <ul class="option-list">
        <li class="selected">
          <span>余额支付</span>
          <i class="fa fa-check option-check"></i>
        </li>
        <li>
          <span>银行卡支付</span>
          <i class="fa fa-check option-check"></i>
        </li>
        <li>
          <span>微信支付</span>
          <i class="fa fa-check option-check"></i>
        </li>
        <li>
          <span>支付宝支付</span>
          <i class="fa fa-check option-check"></i>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- 发布成功弹窗 -->
  <div class="success-modal" id="successModal">
    <div class="success-content">
      <div class="success-icon">
        <i class="fa fa-check"></i>
      </div>
      <div class="success-title">红包已发出</div>
      <div class="success-desc">你的红包已成功发送到群组，等待好友领取吧</div>
      <button class="success-btn" id="modalConfirm">完成</button>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取当前激活的页面容器
    function getActivePage() {
      return document.querySelector('.page-container.active');
    }
    
    // 更新总金额显示
    function updateTotalAmount() {
      const activePage = getActivePage();
      const amount = parseFloat(activePage.querySelector('.amount-input').value) || 0;
      activePage.querySelector('.total-amount').textContent = amount.toFixed(2);
    }
    
    // 风格切换功能
    const styleBtns = document.querySelectorAll('.style-btn');
    const pageContainers = document.querySelectorAll('.page-container');
    
    styleBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有活跃状态
        styleBtns.forEach(b => b.classList.remove('active'));
        pageContainers.forEach(page => page.classList.remove('active'));
        
        // 添加当前活跃状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.querySelector(`.page-container[data-style="${style}"]`).classList.add('active');
        
        // 更新弹窗样式以匹配当前风格
        updateModalStyle(style);
      });
    });
    
    // 更新弹窗样式
    function updateModalStyle(style) {
      const modalPopups = document.querySelectorAll('.modal-popup');
      const modalContents = document.querySelectorAll('.success-content, .success-icon, .success-btn');
      
      modalPopups.forEach(popup => {
        popup.className = popup.className.replace(/style-\d+/g, '');
        popup.classList.add(`style-${style}`);
      });
      
      modalContents.forEach(el => {
        el.className = el.className.replace(/style-\d+/g, '');
        el.classList.add(`style-${style}`);
      });
    }
    
    // 初始化弹窗样式
    updateModalStyle(1);
    
    // 弹窗控制函数
    function openPopup(popupClass, overlayClass) {
      document.querySelector(`.${popupClass}`).classList.add('active');
      document.querySelector(`.${overlayClass}`).style.display = 'block';
      document.body.style.overflow = 'hidden';
    }
    
    function closePopup(popupClass, overlayClass) {
      document.querySelector(`.${popupClass}`).classList.remove('active');
      document.querySelector(`.${overlayClass}`).style.display = 'none';
      document.body.style.overflow = 'auto';
    }
    
    // 红包类型选择
    document.querySelectorAll('.type-item').forEach(item => {
      item.addEventListener('click', function() {
        // 只在当前激活页面中处理
        if (!this.closest('.page-container.active')) return;
        
        // 移除同组中其他元素的活跃状态
        this.parentElement.querySelectorAll('.type-item').forEach(el => {
          el.classList.remove('active');
        });
        
        // 添加当前元素的活跃状态
        this.classList.add('active');
      });
    });
    
    // 红包封面弹窗控制
    document.querySelectorAll('.cover-block').forEach(block => {
      block.addEventListener('click', function() {
        const activePage = this.closest('.page-container');
        if (activePage.classList.contains('active')) {
          openPopup('cover-popup', 'cover-overlay');
        }
      });
    });
    
    document.querySelector('.cover-close').addEventListener('click', () => {
      closePopup('cover-popup', 'cover-overlay');
    });
    
    document.querySelector('.cover-overlay').addEventListener('click', () => {
      closePopup('cover-popup', 'cover-overlay');
    });
    
    // 发放方式弹窗控制
    document.querySelectorAll('.method-block').forEach(block => {
      block.addEventListener('click', function() {
        const activePage = this.closest('.page-container');
        if (activePage.classList.contains('active')) {
          openPopup('method-popup', 'method-overlay');
        }
      });
    });
    
    document.querySelector('.method-close').addEventListener('click', () => {
      closePopup('method-popup', 'method-overlay');
    });
    
    document.querySelector('.method-overlay').addEventListener('click', () => {
      closePopup('method-popup', 'method-overlay');
    });
    
    // 支付方式弹窗控制
    document.querySelectorAll('.payment-block').forEach(block => {
      block.addEventListener('click', function() {
        const activePage = this.closest('.page-container');
        if (activePage.classList.contains('active')) {
          openPopup('payment-popup', 'payment-overlay');
        }
      });
    });
    
    document.querySelector('.payment-close').addEventListener('click', () => {
      closePopup('payment-popup', 'payment-overlay');
    });
    
    document.querySelector('.payment-overlay').addEventListener('click', () => {
      closePopup('payment-popup', 'payment-overlay');
    });
    
    // 选项列表选择功能
    document.querySelectorAll('.option-list li').forEach(item => {
      item.addEventListener('click', function() {
        // 清除同列表中其他元素的选中状态
        this.parentElement.querySelectorAll('li').forEach(el => {
          el.classList.remove('selected');
        });
        
        // 添加当前元素的选中状态
        this.classList.add('selected');
        
        // 获取选中的值并更新到对应的选项区块
        const selectedText = this.querySelector('span').textContent;
        const popupClass = this.closest('.modal-popup').classList[1]; // 获取popup的类型
        
        // 根据弹窗类型更新对应区块的值
        if (popupClass === 'cover-popup') {
          getActivePage().querySelector('.cover-block .option-value').textContent = selectedText;
        } else if (popupClass === 'method-popup') {
          getActivePage().querySelector('.method-block .option-value').textContent = selectedText;
        } else if (popupClass === 'payment-popup') {
          getActivePage().querySelector('.payment-block .option-value').textContent = selectedText;
        }
        
        // 关闭弹窗
        closePopup(popupClass, popupClass.replace('popup', 'overlay'));
      });
    });
    
    // 金额输入事件监听
    document.querySelectorAll('.amount-input').forEach(input => {
      input.addEventListener('input', function() {
        // 只处理当前激活页面的输入
        if (this.closest('.page-container.active')) {
          updateTotalAmount();
        }
      });
    });
    
    // 发布红包功能
    document.querySelectorAll('.publish-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const activePage = this.closest('.page-container');
        const amount = parseFloat(activePage.querySelector('.amount-input').value) || 0;
        const count = parseInt(activePage.querySelector('.count-input').value) || 0;
        
        if (amount < 0.01) {
          alert('请输入有效的红包金额，最低0.01元');
          return;
        }
        
        if (count < 1) {
          alert('请输入有效的红包数量，至少1个');
          return;
        }
        
        if (amount < count * 0.01) {
          alert(`红包总金额不能少于 ${(count * 0.01).toFixed(2)} 元（每个红包至少0.01元）`);
          return;
        }
        
        // 显示发布成功弹窗
        document.getElementById('successModal').style.display = 'flex';
      });
    });
    
    // 关闭成功弹窗
    document.getElementById('modalConfirm').addEventListener('click', function() {
      document.getElementById('successModal').style.display = 'none';
    });
    
    // 取消和返回按钮
    document.querySelectorAll('.back-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (confirm('确定要取消发红包吗？')) {
          // 在实际应用中这里会返回上一页
          console.log('取消发红包');
        }
      });
    });
    
    // 帮助按钮
    document.querySelectorAll('.help-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        alert('红包帮助：\n1. 拼手气红包：随机分配金额，金额不等\n2. 普通红包：平均分配金额\n3. 运气王红包：随机产生一个运气王获得最大金额\n4. 每个红包最低金额为0.01元');
      });
    });
    
    // 初始化金额显示
    updateTotalAmount();
  </script>
</body>
</html>
